<template>
	<view class="tree">
		<comHead :title="$t('index.zhangjie')" :isLeft="true" :isRight="false" rType="episode"></comHead>
		<le-movable>
			<!-- <view class="imgBox">
				<image class="bgImg" :src="getImg(bgImg)" mode="widthFix"></image>
				<template v-for="(item,index) in treeData">
					<view @click="it.is_look==1?toSiha(it):''" class="item" v-for="(it,ind) in item.info_list" :style="{left:it.x_value/22.95+'%',top:it.y_value/110+'%',backgroundColor:it.is_look==1?'rgba(0,0,0,0)':'rgba(0,0,0,0.5)'}">
					</view>
				</template>
			</view> -->
			<tree-item @tosiha="tosiha" :tree-data="treeData" :ls-data="lsData" :tree-first="true" />
		</le-movable>
	</view>
</template>

<script>
	import treeItem from '@/components/tree-item/tree-item.vue'
	export default {
		components: {
			treeItem
		},
		data() {
			return {
				bgImg:"",
				treeData: [],
				lsData:[]
			};
		},
		onShow() {
			this.getEpisodeChapter()
		},
		methods: {
			toSiha(e){
				console.log(e)
				if(e.is_look){
					if(e.video_type==2){
						this.comLink('/pages/index/siha?id='+e.id)
					}else{
						this.comLink('/pages/index/siha2?id='+e.id)
					}
				}
			},
			async getEpisodeChapter() {
				const res = await this.$myRequest({
					url: 'api/index/getEpisodeChapter',
					data: {}
				})
				if (res.code == 1) {
					this.lsData = res.data[0].info_list
					this.treeData = res.data
					this.treeData[0].info_list = []
					for (let s of this.lsData) {
						for (let s1 of (res.data[0].xia_ids.toString()).split(',')) {
							if(s.id==s1){
								// console.log(s)
								this.treeData[0].info_list.push(s)
								// this.comNext(s)
							}
						}
					}
					this.bgImg = res.data[0].branch_image
				}
			},
			// comNext(item){
			// 	if(!item.info_list){
			// 		item.info_list = []
			// 	}
			// 	let lsArr = (item.xia_ids.toString()).split(',')
			// 	// console.log(lsArr)
			// 	for (let s of this.lsData) {
			// 		if(lsArr.indexOf(s.id+'')>-1 && s.is_look==1){
			// 			// console.log(s.id)
			// 			item.info_list.push(s)
			// 			// this.comNext(s)
			// 		}
			// 	}
			// },
			tosiha(e){
				console.log(e)
				// this.comLink('/pages/index/siha')
			},
			// 返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.tree {
		// background: #000;
		height: calc(100vh - var(--status-bar-height));
		position: relative;
		overflow: hidden;
		.imgBox{
			position: relative;
			transform: scale(4);
			// margin-top: 5300rpx;
			// transform-origin: -20% -50%;
			.bgImg{
				width: 100%;
			}
			.item{
				position: absolute;
				width: 54rpx;
				height: 35rpx;
				// border: 1rpx solid red;
				z-index: 101;
				top: 0;
				left: 0;
			}
		}
		.tree-content {
			min-height: calc(100vh - var(--status-bar-height) + 50rpx);
			// background: #000;
			position: absolute;
			top: calc(var(--status-bar-height) + 50rpx);
			left: 5%;
			transform-origin: 0% 0%;
			width: 100%;
			// transform: scale(0.5);
		}
	}
	.episodePop {
		width: 217rpx;
		// height: 300rpx;
		opacity: 1;
		position: fixed;
		z-index: 100000001;
		color: #D8D8D8;
		font-size: 28rpx;
		right: 0;
		bottom: 150rpx;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: flex-end;
		justify-content: center;
		.item{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			background: rgba(77, 77, 77, 0.51);
			border-radius: 24rpx;
			padding: 20rpx;
			image{
				width: 48rpx;
			}
			
			&.xd{
				width: 170%;
				max-height: 300rpx;
				overflow: auto;
				.it{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						margin: 0 20rpx;
					}
				}
			}
		}
		text {
			border-bottom: 2rpx solid #333333;
			padding: 10rpx 0;
	
			&:last-child {
				border: none;
			}
		}
	}
</style>